<template>
  <div>
    <a-date-picker
      v-model="startValue"
      :disabled-date="disabledStartDate"
      mode="year"
      show-time
      format="YYYY"
      placeholder="开始时间"
      :open="startOpen"
      :disabled="disabled"
      @openChange="handleStartOpenChange"
    />
    <a-date-picker
      v-model="endValue"
      :disabled-date="disabledEndDate"
      show-time
      mode="year"
      format="YYYY"
      placeholder="结束时间"
      :disabled="disabled"
      :open="endOpen"
      @openChange="handleEndOpenChange"
    />
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: "GYearRangePicker",
  model:{
    prop:"value",
    event: "change"
  },
  props:{
    value:{
      type:Object,
      required: false,
      default: ()=>{}
    },
    disabled:{
      type: Boolean,
      required: false,
      default: false
    }
  },
  data(){
    return {
      yearValue:{},
      rangeYearValue:{
        startValue:'',
        endValue:'',
      },
      rangeYear:{
        startYear:{},
        endYear:{},
      },
      startValue: null,
      endValue: null,
      startOpen:false,
      endOpen: false,
    }
  },
  watch: {
    value (val){
      if(!val){
        this.startValue = null;
        this.endValue = null;
      } else {
        this.yearValue.startValue = moment(val.startYear,'YYYY')
        this.yearValue.endValue = moment(val.endYear,'YYYY')
      }
    },
    startValue(val) {
      console.log('startValue', val);
    },
    endValue(val) {
      console.log('endValue', val);
    },

  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
  },
}
</script>

<style scoped>

</style>